<template>
  <div v-loading="loading">
    <card-box title="多条件筛选布局" icon="icon-template_template">
      <div slot="card-content">
        <el-row :gutter="15">
          <el-col :xs="24" :lg="10">
            <div class="click-table2-oper">
              <el-button type="success" size="mini" @click="insertEvent">新增</el-button>
              <!-- <el-button type="danger" size="mini" @click="pendingRemoveEvent">标记/取消删除</el-button> -->
              <el-button type="danger" size="mini" @click="deleteSelectedEvent">删除选中</el-button>
              <el-button type="warning" size="mini" @click="submitEvent">保存</el-button>
              <el-button type="success" size="mini" @click="exportCsvEvent">导出</el-button>
            </div>
          </el-col>
          <el-col :xs="24" :lg="14">
            <el-form
              ref="tableform"
              class="filter-right-box"
              size="mini"
              :inline="true"
              :model="formData"
            >
              <el-form-item label="名字" prop="name" class="filter-right-box-content clearfix">
                <el-input v-model="formData.name" placeholder="名字"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="sex" class="filter-right-box-content clearfix">
                <el-select v-model="formData.sex" placeholder="性别">
                  <el-option
                    v-for="(item, index) in sexList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchEvent">查询</el-button>
                <!-- <el-button @click="$refs.tableform.resetFields()">重置</el-button> -->
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>

        <el-editable
          ref="editable"
          class="click-table2"
          border
          height="470"
          size="mini"
          :data.sync="list"
          :row-class-name="tableRowClassName"
          :edit-config="{trigger: 'click', mode: 'cell'}"
          style="width: 100%;textAlign:center"
        >
          <el-editable-column type="selection" width="55" fixed></el-editable-column>
          <el-editable-column prop="id" label="ID" width="80"></el-editable-column>
          <el-editable-column
            prop="name"
            label="名字"
            show-overflow-tooltip
            :edit-render="{name: 'ElInput'}"
          ></el-editable-column>
          <el-editable-column
            prop="sex"
            label="性别"
            :edit-render="{name: 'ElSelect', options: sexList}"
          ></el-editable-column>
          <el-editable-column
            prop="age"
            label="年龄"
            width="100"
            :edit-render="{name: 'ElInputNumber', attrs: {min: 1, max: 200}}"
          ></el-editable-column>
          <el-editable-column
            prop="region"
            label="地区"
            width="200"
            :edit-render="{name: 'ElCascader', attrs: {options: regionList}}"
          ></el-editable-column>
          <el-editable-column
            prop="role"
            label="角色"
            width="100"
            show-overflow-tooltip
            :edit-render="{name: 'ElInput'}"
          ></el-editable-column>
          <el-editable-column
            prop="describe"
            label="文本域"
            width="200"
            show-overflow-tooltip
            :edit-render="{name: 'ElInput', attrs: {type: 'textarea', autosize: {minRows: 1, maxRows: 4}}}"
          ></el-editable-column>
          <el-editable-column
            prop="date"
            label="日期"
            width="100"
            :edit-render="{name: 'ElDatePicker', attrs: {type: 'datetime', format: 'yyyy-MM-dd'}}"
          ></el-editable-column>
          <el-editable-column
            prop="flag"
            label="是否启用"
            :edit-render="{name: 'ElSwitch', type: 'visible'}"
          ></el-editable-column>
          <el-editable-column prop="updateTime" label="更新时间" width="160" :formatter="formatterDate"></el-editable-column>
          <el-editable-column prop="createTime" label="创建时间" width="160" :formatter="formatterDate"></el-editable-column>
          <el-editable-column prop="attr3" label="链接">
            <template>
              <a href="https://github.com/xuliangzhan/vue-element-extends" target="_blank">打开链接</a>
            </template>
          </el-editable-column>
          <el-editable-column label="操作" width="100">
            <template v-slot="scope">
              <el-button size="mini" type="danger" @click="removeEvent(scope.row)">删除</el-button>
            </template>
          </el-editable-column>
        </el-editable>

        <el-pagination
          class="click-table2-pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageVO.currentPage"
          :page-sizes="[5, 10, 15, 20, 50, 100, 150, 200]"
          :page-size="pageVO.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageVO.totalResult"
        ></el-pagination>
      </div>
    </card-box>
  </div>
</template>

<script>
import XEUtils from 'xe-utils'
import CardBox from "@/components/CardBox"
import regionData from "@/common/json/editable/region.json";
import sexData from "@/common/json/editable/sex.json";
import { MessageBox, Message } from 'element-ui'

export default {
  components: { CardBox },
  data () {
    return {
      loading: false,
      sexList: [],
      regionList: [],
      list: [],
      formData: {
        name: null,
        sex: null,
        role: null
      },
      pageVO: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0
      },
      pendingRemoveList: []
    }
  },
  created () {
    this.findSexList()
    this.findRegionList()
    this.findList()
  },
  methods: {
    findList () {
      this.loading = true
      this.pendingRemoveList = []
      console.log(this.formData)
      //模拟数据
      const response = {
        "data": {
          "page": {
            "pageSize": 10,
            "currentPage": 1,
            "totalResult": 116
          },
          "result": [{
            "id": 67,
            "name": "test_66",
            "nickname": "名字_66",
            "password": "dbEfDF",
            "sex": "0",
            "role": "项目经理",
            "region": [9, 73, 719],
            "email": "cgfadbedacbeg@163.com",
            "age": 24,
            "rate": 2,
            "flag": false,
            "phone": "13688921924",
            "describe": "户息信",
            "describe2": "息用息信用户户",
            "describe3": "户息息户用信信户用信信用信户户息息用息用",
            "seq": 66,
            "date": 1548512876534,
            "createTime": 1547267898801,
            "updateTime": 1550573301318,
            "attr1": null,
            "attr2": null,
            "attr3": null,
            "attr4": null,
            "attr5": null,
            "attr6": null
          }, {
            "id": 51,
            "name": "test_50",
            "nickname": "名字_50",
            "password": "DCFbeAGdgf",
            "sex": "1",
            "role": "测试",
            "region": [19, 199, 1773],
            "email": "gadcefacbfedda@qq.com",
            "age": 26,
            "rate": 3,
            "flag": false,
            "phone": "13640660327",
            "describe": "用信户户息",
            "describe2": "用信息户用户户息信用",
            "describe3": "息信户息用用信",
            "seq": 50,
            "date": 1550281824472,
            "createTime": 1548265645776,
            "updateTime": 1550567693196,
            "attr1": null,
            "attr2": null,
            "attr3": null,
            "attr4": null,
            "attr5": null,
            "attr6": null
          }, {
            "id": 78,
            "name": "name_77",
            "nickname": "昵称_77",
            "password": "DAegFBGdEcaf",
            "sex": "1",
            "role": "测试",
            "region": [19, 199, 1773],
            "email": "ddbefgeegacc@qq.com",
            "age": 29,
            "rate": 0,
            "flag": false,
            "phone": "13684935781",
            "describe": "户息信用",
            "describe2": "信息息用户户户用信",
            "describe3": "息用用息用信息户信",
            "seq": 77,
            "date": 1547005736323,
            "createTime": 1548189097198,
            "updateTime": 1550470632320,
            "attr1": null,
            "attr2": null,
            "attr3": null,
            "attr4": null,
            "attr5": null,
            "attr6": null
          }, {
            "id": 52,
            "name": "name_51",
            "nickname": "名字_51",
            "password": "cbDCGgA",
            "sex": "1",
            "role": "项目经理",
            "region": [19, 199, 1773],
            "email": "fbcceebf@qq.com",
            "age": 30,
            "rate": 3,
            "flag": true,
            "phone": "13665327584",
            "describe": "户信用户",
            "describe2": "息户用息户户用信",
            "describe3": "用信户息息息息信用息户户信用户信信用用户",
            "seq": 51,
            "date": 1548036316276,
            "createTime": 1547314881486,
            "updateTime": 1550415671487,
            "attr1": null,
            "attr2": null,
            "attr3": null,
            "attr4": null,
            "attr5": null,
            "attr6": null
          }, {
            "id": 42,
            "name": "name_41",
            "nickname": "昵称_41",
            "password": "bCFgdcG",
            "sex": "0",
            "role": "项目经理",
            "region": [1, 1, 5],
            "email": "dbbefce@163.net",
            "age": 23,
            "rate": 2,
            "flag": true,
            "phone": "13678156384",
            "describe": "用信息用",
            "describe2": "信息用用户",
            "describe3": "户信息户用息户信息息户用息信户信用信用",
            "seq": 41,
            "date": 1549280564062,
            "createTime": 1547669510915,
            "updateTime": 1550324284427,
            "attr1": null,
            "attr2": null,
            "attr3": null,
            "attr4": null,
            "attr5": null,
            "attr6": null
          }, {
            "id": 55,
            "name": "name_54",
            "nickname": "昵称_54",
            "password": "EfdeaD",
            "sex": "0",
            "role": "后端",
            "region": [19, 199, 1773],
            "email": "fbfegcfd@qq.com",
            "age": 22,
            "rate": 1,
            "flag": true,
            "phone": "13664326759",
            "describe": "户用用",
            "describe2": "息户用户信户信",
            "describe3": "户户信息息用用息",
            "seq": 54,
            "date": 1548151574217,
            "createTime": 1549099867919,
            "updateTime": 1550276892524,
            "attr1": null,
            "attr2": null,
            "attr3": null,
            "attr4": null,
            "attr5": null,
            "attr6": null
          }, {
            "id": 69,
            "name": "test_68",
            "nickname": "名字_68",
            "password": "fCbgaFeE",
            "sex": null,
            "role": "项目经理",
            "region": [19, 199, 1773],
            "email": "aedfbcefda@163.net",
            "age": 24,
            "rate": 0,
            "flag": false,
            "phone": "13657325499",
            "describe": "息用信",
            "describe2": "信用户户息信",
            "describe3": "信用户户信信户",
            "seq": 68,
            "date": 1550285591035,
            "createTime": 1546735809772,
            "updateTime": 1550261388224,
            "attr1": null,
            "attr2": null,
            "attr3": null,
            "attr4": null,
            "attr5": null,
            "attr6": null
          }, {
            "id": 5,
            "name": "name_4",
            "nickname": "名字_4",
            "password": "bDBECcf",
            "sex": "1",
            "role": "设计",
            "region": [9, 73, 719],
            "email": "ggcdf@163.com",
            "age": 20,
            "rate": 5,
            "flag": true,
            "phone": "13615284292",
            "describe": "息信用户",
            "describe2": "息用息用信",
            "describe3": "息用信信信户息用用息息",
            "seq": 4,
            "date": 1548842295952,
            "createTime": 1547141848754,
            "updateTime": 1550261059245,
            "attr1": null,
            "attr2": null,
            "attr3": null,
            "attr4": null,
            "attr5": null,
            "attr6": null
          }, {
            "id": 40,
            "name": "test_39",
            "nickname": "昵称_39",
            "password": "DCBgAdf",
            "sex": "0",
            "role": "测试",
            "region": [9, 73, 719],
            "email": "cefdacbabdcfg@qq.net",
            "age": 26,
            "rate": 1,
            "flag": false,
            "phone": "13641248642",
            "describe": "用用信息户户",
            "describe2": "用息户信",
            "describe3": "用息息户息用信信用户户",
            "seq": 39,
            "date": 1546835231132,
            "createTime": 1546801486450,
            "updateTime": 1550198931026,
            "attr1": null,
            "attr2": null,
            "attr3": null,
            "attr4": null,
            "attr5": null,
            "attr6": null
          }, {
            "id": 31,
            "name": "test_30",
            "nickname": "昵称_30",
            "password": "DeAcdBGC",
            "sex": "0",
            "role": "设计",
            "region": [1, 1, 5],
            "email": "efbbacdaecdcfggebdfa@163.net",
            "age": 23,
            "rate": 4,
            "flag": false,
            "phone": "13695762044",
            "describe": "用户用",
            "describe2": "户用息户信户信用息",
            "describe3": "息用信户信息户信户用用息用息信",
            "seq": 30,
            "date": 1547766240839,
            "createTime": 1549260719177,
            "updateTime": 1550144653808,
            "attr1": null,
            "attr2": null,
            "attr3": null,
            "attr4": null,
            "attr5": null,
            "attr6": null
          }]
        },
        "status": 200,
        "headers": {
          "content-type": "application/json; charset=UTF-8"
        }
      }
      setTimeout(() => {
        let { page, result } = response.data
        this.list = result
        this.pageVO.totalResult = page.totalResult
        this.loading = false
      }, 500)
    },
    findSexList () {
      // 模拟数据
      return new Promise(() => {
        setTimeout(() => {
          this.sexList = XEUtils.clone(sexData, true);        }, 300);
      });
    },
    findRegionList () {
      // 模拟数据
      return new Promise(() => {
        setTimeout(() => {
          this.regionList = XEUtils.clone(regionData, true);        }, 300);
      });
    },
    searchEvent () {
      this.pageVO.currentPage = 1
      this.findList()
    },
    handleSizeChange (pageSize) {
      this.pageVO.pageSize = pageSize
      this.findList()
    },
    handleCurrentChange (currentPage) {
      this.pageVO.currentPage = currentPage
      this.findList()
    },
    formatterDate (row, column, cellValue, index) {
      return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
    },
    tableRowClassName ({ row, rowIndex }) {
      if (this.pendingRemoveList.some(item => item === row)) {
        return 'delete-row'
      }
      return ''
    },
    insertEvent () {
      let row = this.$refs.editable.insert({
        name: `New ${Date.now()}`,
        age: 26,
        flag: false
      })
      this.$nextTick(() => this.$refs.editable.setActiveRow(row))
    },
    removeEvent (row) {
      if (row.id) {
        MessageBox.confirm('确定永久删除该数据?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          setTimeout(() => {
            this.loading = false;
          }, 400);
          // XEAjax.doDelete(`/api/user/delete/${row.id}`).then(({ data }) => {
          //   this.findList()
          // }).catch(e => {
          //   this.loading = false
          // })
          let selection = this.$refs.elEditable.getSelecteds()
          if (selection.length) {
            this.$refs.elEditable.removeSelecteds()
            Message({ message: '删除成功', type: 'success' })
          } else {
            Message({
              type: 'info',
              message: '请至少选择一条数据！'
            })
          }
        }).catch(e => e)
      } else {
        this.$refs.editable.remove(row)
      }
    },
    // pendingRemoveEvent () {
    //   let selection = this.$refs.editable.getSelecteds()
    //   if (selection.length) {
    //     let plus = []
    //     let minus = []
    //     selection.forEach(data => {
    //       if (this.pendingRemoveList.some(item => data === item)) {
    //         minus.push(data)
    //       } else {
    //         plus.push(data)
    //       }
    //     })
    //     if (minus.length) {
    //       this.pendingRemoveList = this.pendingRemoveList.filter(item => minus.some(data => data !== item)).concat(plus)
    //     } else if (plus) {
    //       this.pendingRemoveList = this.pendingRemoveList.concat(plus)
    //     }
    //     this.$refs.editable.clearSelection()
    //   } else {
    //     Message({
    //       type: 'info',
    //       message: '请至少选择一条数据！'
    //     })
    //   }
    // },
    deleteSelectedEvent () {
      let removeRecords = this.$refs.editable.getSelecteds()
      if (removeRecords.length) {
        MessageBox.confirm('确定删除所选数据?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true;
          setTimeout(() => {
            //删除选中数据行
            this.$refs.editable.removeSelecteds();
            this.loading = false;
          }, 400);
          // XEAjax.doPost('/api/user/save', { removeRecords }).then(({ data }) => {
          //   Message({
          //     type: 'success',
          //     message: '删除成功!'
          //   })
          //   this.findList()
          // }).catch(e => {
          //   this.loading = false
          // })
        }).catch(e => e)
      } else {
        Message({
          type: 'info',
          message: '请至少选择一条数据！'
        })
      }
    },
    submitEvent () {
      this.$refs.editable.validate(valid => {
        if (valid) {
          let removeRecords = this.pendingRemoveList
          let { insertRecords, updateRecords } = this.$refs.editable.getAllRecords()
          if (insertRecords.length || updateRecords.length || removeRecords.length) {
            insertRecords.forEach(item => {
              if (XEUtils.isDate(item.date)) {
                item.date = item.date.getTime()
              }
            })
            updateRecords.forEach(item => {
              if (XEUtils.isDate(item.date)) {
                item.date = item.date.getTime()
              }
            })
            this.loading = true;
            setTimeout(() => {
              this.loading = false;
            }, 400);

            // XEAjax.doPost('/api/user/save', { insertRecords, updateRecords, removeRecords }).then(({ data }) => {
            //   Message({
            //     type: 'success',
            //     message: '保存成功!'
            //   })
            //   this.findList()
            // }).catch(e => {
            //   this.loading = false
            // })
          } else {
            Message({
              type: 'info',
              message: '数据未改动！'
            })
          }
        }
      })
    },
    exportCsvEvent () {
      this.$refs.editable.exportCsv()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
